/* 登录页思路分析
1.切换登录与注册盒子
2.登录功能
3.注册功能
*/

// 1.点击切换按钮 ：切换   登录/注册盒子

//  1.1点击登录a切换注册 ：(1)显示注册盒子 (2)隐藏登录盒子
document.querySelector('.login a').addEventListener('click', () => {
  //  显示注册盒子
  document.querySelector('.register').style.display = 'block'
  //  隐藏登录盒子
  document.querySelector('.login').style.display = 'none'
})

//  1.2点击登录a切换注册 ：(1)显示登录盒子 (2)隐藏注册盒子
document.querySelector('.register a').addEventListener('click', () => {
  //  隐藏注册盒子
  document.querySelector('.register').style.display = 'none'
  //  显示登录盒子
  document.querySelector('.login').style.display = 'block'
})

/* 2.登录功能 ：form表单按钮需要阻止表单默认跳转
    (1) 获取表单文本
    (2) 非空判断
    (3) 正则校验   6-15位
    (4) 发送ajax请求*/
document.querySelector('.login button').addEventListener('click', function (e) {
  //  0.阻止表单默认跳转
  e.preventDefault()
  //  1.获取表单文本
  let username = document.querySelector('.login [name="username"]').value
  let password = document.querySelector('.login [name="password"]').value
  //  2.非空判断
  let formList = document.querySelectorAll('.login input')
  if (Array.from(formList).some(item => item.value == '')) {
    //  弹窗提示
    return Toast.fail('输入内容不能为空')
  }

  //  3.正则校验
  if (Array.from(formList).some(item => !/^\w{6,15}$/.test(item.value))) {
    return Toast.fail('账号密码必须是6-15位')
  }
  //  4.ajax发送登录请求
  axios({
    url: '/api/login',
    method: 'post',
    data: { username, password }
  }).then(res => {
    //  成功回调
    console.log(res)
    //  登录判断
    if (res.data.code === 0) {
      Toast.success(res.data.message)
      //  将服务器返回的token存入硬盘中
      localStorage.setItem('mytoken', res.data.token)
      //  跳转到首页
      location.href = 'index.html'
    } else {
      Toast.success(res.data.message)
    }
  })
})

/* 3.注册功能 ：form表单按钮需要阻止表单默认跳转
    (1) 获取表单文本
    (2) 非空判断
    (3) 正则校验   6-15位
    (4) 发送ajax请求*/
document.querySelector('.register button').addEventListener('click', function (e) {
  //  0.阻止表单默认跳转
  e.preventDefault()
  //  1.获取表单文本
  let username = document.querySelector('.register [name="username"]').value
  let password = document.querySelector('.register [name="password"]').value
  //  2.非空判断
  let formList = document.querySelectorAll('.register input')
  if (Array.from(formList).some(item => item.value == '')) {
    //  弹窗提示
    return Toast.fail('输入内容不能为空')
  }

  //  3.正则校验
  if (Array.from(formList).some(item => !/^\w{6,15}$/.test(item.value))) {
    return Toast.fail('账号密码必须是6-15位')
  }
  //  4.ajax发送登录请求
  axios({
    url: '/api/register',
    method: 'post',
    data: { username, password }
  }).then(res => {
    //  成功回调
    console.log(res)
    //  注册判断
    if (res.data.code === 0) {
      Toast.success(res.data.message)
      //  注册完切换到登录盒子
      document.querySelector('.register a').click()
      //  注册完清空表单
      document.querySelector('.register form').reset()
    } else {
      Toast.success(res.data.message)
    }
  })
})